<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.a {
				width: 0;
				height: 0;
				margin: 20px auto;
				/* 给了宽度就可以设置盒子居中，哪怕宽度为0 */
				border-top: 30px solid green;
				border-bottom: 30px solid yellow;
				border-left: 30px solid hotpink;
				border-right: 30px solid skyblue;
			}

			.b {
				width: 0;
				height: 0;
				/* margin: 20px auto; */
				/* 给了宽度就可以设置盒子居中，哪怕宽度为0 */
				border: 50px solid transparent;
				border-left-color: hotpink;
				margin: 60px auto;
			}

			.c {
				position: relative;
				margin: 40px auto;
				width: 280px;
				height: 140px;
				background-color: skyblue;
			}

			.d {
				position: absolute;
				right: -20px;
				top: 60px;
				width: 0;
				height: 0;
				line-height: 0;
				font-size: 0;
				border: 10px solid transparent;
				border-left-color: skyblue;
			}
		</style>
	</head>
	<body>
		<h1>三角实现的原理，就是给一个大小为0的空盒子，然后设置边框的宽度，其中三条边设置为白色或透明，最后一边设置相应的颜色，四条边框就会挤成三角形</h1>
		<div class="a"></div>
		<div class="b"></div>
		<h1>小米官网的盒子实现，首先给一个矩形，在给一个三角，用定位给定位子</h1>
		<div class="c">
			<div class="d"></div>
		</div>
	</body>
</html>
